<template>
  <div class="List" :style="{width:$store.state.screenWidth+'px'}">
    <el-row :gutter="30" >
      <el-col :span="15">
       <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/list/images' }">返回列表页</el-breadcrumb-item>
    <el-breadcrumb-item >图片新闻 </el-breadcrumb-item >

      </el-breadcrumb>
        <b>图片新闻</b>
      </div>
    </template>
   <h3 v-text="obj.title" style="text-align: center;"></h3>
   <p v-text="obj.date" style="text-align: center;"></p>
    <el-row :gutter="5">
      <el-col :span="12" v-for="(src,index) in obj.arr" :key="index">
      <img :src="src" alt="" style="width: 100%;"></el-col>
    </el-row>
    
  </el-card>
      </el-col>
      <el-col :span="9" class="bar">
    <BarVue></BarVue>
    </el-col>
    </el-row>
  </div>
</template>
<script>
import BarVue from '@/components/Bar.vue';


export default{
    name: "detailImgCom",
    data() {
        return {
       
            
            obj:{},
     
        };
    },
    components:{
        BarVue
    },
  
    mounted() {
        const id=this.$route.params.id;
        const params={id,tableName:'Images'}
             this.$axios.get("getDetail", { params }).then((rs) => {
                 const d=new Date(rs.updatedAt);
                 const date=d.getFullYear()+'年'+(d.getMonth()+1)+'月'+ d.getDate()+'日';
                 let arr=[]
                 arr=rs.photoes.split(',').map(el=>{
                  if(el!=''){
                    return this.$store.state.URL+'photoes/'+el
                  }
                
                 }) 
                 this.obj={id:rs.id,date,title:rs.title,arr}
            
   });

   
    },
  
   
   
}


</script>
<style scoped lang="less">
.List{
  

   margin:170px  auto 100px;
  .el-row{
   .el-col{
    .el-card{
      ul{
        list-style: none;
        padding: 0;
       
        li{
           padding-bottom: 10px;
          a,a:visited{
            
            text-decoration: none;
           
            
            section{
               h4{
                color: #00a4df;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
               
                overflow: hidden;
                &:hover{
                  color: black;
                }
              }
              .bbox{
                display: flex;

                .box{
                  flex:5;
                  margin-top: -10px;
                  margin-right: 20px;
                  .num{
                color: rgb(82, 92, 89);
                font-size: 13px;
                span{
                  margin-right: 10px;
                }
              }
             
              p{
                font-size: 14px;
                line-height: 1.45;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
                word-break: break-all;
                overflow: hidden;
                text-indent: 2em;
                color: black;
                &:hover{
                  color: rgb(71, 89, 141);
                }
              }
            }   
                aside{
             flex: 3;
              height: 140px;
              display: flex;
              justify-items: center;
              
              
              img{
             
                width: 100%;
                height: 100%;
              }

            }
                }
              }
              
           
          }
        }
      }
      .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
    
  
}
    }
   }
  }
}
</style>

